<template>
  <div class="page">
    <m-header :title="langText&&langText.upgrade" :canback="Boolean(1)"></m-header>
    <div class="body">

        <div class="box">
          <div>
            <span>{{langText&&langText.ocpn}}</span>
            <span>{{data&&data.name_cn}}</span>
          </div>
          <div>
            <span>{{langText&&langText.originaldeposit}}</span>
            <span>{{data&&data.price}} {{langText&&langText.usdt}}</span>
          </div>
          <div>
            <span>{{langText&&langText.opdi}}</span>
            <span>{{data&&data.per}}%</span>
          </div>
        </div>

        <div class="box">
          <div>
            <span>{{langText&&langText.upgradepackage}}</span>
            <span class="span_right" @click="choicePay">
              {{tcname}}
              <div class="span_right_icon" >
                  
                  
                  <p>
                    <i class="iconfont iconshang mark" ></i>
                  </p>
                  <p>
                    <i class="iconfont iconxia mark"></i>
                  </p>
              </div>
            </span>
          </div>
        </div>
        
        <div class="box">
          <div class="title">{{langText&&langText.upgradeinformation}}</div>
          <div>
            <span>{{langText&&langText.upgradepackagedeadline}}</span>
            <span>{{obj&&obj.days}}{{langText&&langText.day}}</span>
          </div>
          <div>
            <span>{{langText&&langText.upgradepackagedeposit}}</span>
            <span>{{obj&&obj.price}} {{langText&&langText.usdt}}</span>
          </div>
          <div>
            <span>{{langText&&langText.expiredate}}</span>
            <span>{{(obj&&obj.updatetime)}}</span>
          </div>
          <div>
            <span>{{langText&&langText.spread}}</span>
            <span>{{obj&&obj.difference}} {{langText&&langText.usdt}}</span>
          </div>
        </div>
        
        <div class="zy">
          <p>
           {{langText&&langText.note}}： 
          </p>
          <p>
            {{zy}}
          </p>
        </div>

        <button class="btn-submit btn-origin bot-btn" @click="$refs['pwd'].open()">{{langText&&langText.upgrade}}</button>
    </div>
    <m-pwd ref="pwd" @pay="pay"></m-pwd>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner,Trade } from "@/server/server.js";
import { Load,Util } from "@/assets/commonjs/utils.js";
import mPwd from '@/components/pwd-alert.vue';
import { mapGetters } from "vuex";
import { Hashrate,MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      allTxt:null,
      payPicker:new mui.PopPicker(),
      id:null,
      data:{
        name_cn:null,
        price:null,
        per:null
      },
      obj:{
        difference:null,
        zy:null,
        days:null,
        price:null,
        updatetime:null
      },
      data2:{},
      nameArr:null,
      tcname:null,
      zy:null,
      langText:null,
      tcId:null
    };
  },
  computed: {
    ...mapGetters(["uid", "userInfo", "api","lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.initData()
    this.myTcDetail()
    this.getUpTc()
  },
  methods: {
    pay(paypwd){
      // console.log(paypwd,this.id)
      Trade.tcUp({id:this.tcId,paypwd}).then(res=>{
        mui.toast(res.msg)
        if(res.code==1){
          setTimeout(()=>{ this.$router.go(-2) },500)
        }
      })
    },
    formatDate(time){
      return Util.formatDate(time).substring(0,10)
    },
    initData(){
      this.id = this.$route.query.id;
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
      this.allTxt = Object.assign({},Hashrate,MyTxt)
    },
    myTcDetail(){
      Trade.myTcDetail({id:this.id}).then(res=>{
        if(res.code==1){
          this.data = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getUpTc(){
      Trade.getUpTc().then(res=>{
        if(res.code==1){
          this.data2 = res.data.data
          var arr = res.data.data.map((v,i)=>{
            return {text:v.name_cn,value:i}
          })
          this.nameArr = arr;
          this.tcname = this.nameArr[0].name||'';
          this.obj = this.data2[0];
          this.payPicker.setData(this.nameArr);
          this.zy = res.data.zy;
          this.tcname = this.data2[0].name_cn;
          this.tcId = this.data2[0].id;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    choicePay(){
      let _This = this;
      this.isDown = false;
      this.payPicker.show(function(items) {
        _This.tcname = items[0].text;
        _This.obj = _This.data2[items[0].value]
        _This.tcId = _This.data2[items[0].value].id;
        console.log(items)
        // console.log(_This.payType,items[0].value)
      })
    }
  },
  components: {
    navItem,mPwd
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .box{
    width: 710px;
    margin: 20px 20px 0;
    background-color: #fff;
    border-radius: 10px;
    padding: 0 20px;
    >div{
      height: 98px;
      line-height: 98px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eeeeee;
      &:last-child{ border-bottom: none; }
      >span{
        &:first-child{
          font-size:34px;
          font-weight:500;
          color:rgba(51,51,51,1);
        }
        &:last-child{
          font-size:28px;
          font-family:PingFangSC-Regular,PingFangSC;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
      }
        .span_right{
          display: inline-block;
          height: 60px;
          line-height: 60px;
          border-radius:8px;
          border:1px solid rgba(221,221,221,1);
          // padding: 10px 14px;
          padding: 0 44px 0 14px;
          margin-top: 25px;
          position: relative;
          .span_right_icon{
            display: inline-block;
            position: absolute;
            right: 10px;
            top: -12px;
            p{ 
              color: #AAAAAA;
              height: 14px;
              &:last-child{
                margin-top: 4px;
              }
             }
            i{
              font-size: 24px;
              line-height: 0;
            }
          }
        }
    }
    .title{
      font-size:32px;
      font-weight:500;
      color:rgba(78,182,173,1);
      border-bottom: none;
      height: 80px;
      line-height: 80px;
    }
  }

  
  .bot-btn{
    width: 710px;
    height: 88px;
    line-height: 88px;
    margin: 30px 20px 30px;
    border-radius: 10px;
    background-color: #4EB6AD;

    color: #fff;
  }
  .zy{
    margin: 20px;
    p{
      font-size:24px;
      color:rgba(153,153,153,1);
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>